<template>
  <os-table autoHeight stripe action="system/orgTypePage" :columns="columns" :form="form" ref='osTable' :btn="btn" size="small" border />
</template>

<script>
export default {
  name: 'OrgTypePage',
  data () {
    return {
      form: {
        rule: [
          { type: 'Input', title: '组织体系编码', field: 'typeCode' },
          { type: 'Input', title: '组织体系名称', field: 'typeName' },
          { type: 'el-button', field: 'search', props: { type: 'primary' }, children: ['查询'], emit: ['click'] },
          { type: 'el-button', field: 'clear', props: { type: 'primary' }, children: ['清空'], emit: ['click'] }
        ]
      },
      btn: [
        { text: '新增', cb: cb => this.onAdd() }
      ],
      columns: [
        // {label: 'id', prop: 'id'},
        { label: '组织体系编码', prop: 'typeCode' },
        { label: '组织体系名称', prop: 'typeName' },
        {
          label: '状态',
          prop: 'validation',
          renderCell: ({ row }) => {
            let showData = ''
            if (row.validation === '1') {
              showData = '启用'
            } else if (row.validation === '0') {
              showData = '停用'
            }
            return <span>{showData}</span>
          }
        },
        { label: '序号', prop: 'sortNo' },
        { label: '描述', prop: 'description' },
        {
          label: '操作',
          prop: 'action',
          renderCell: (data) => (
            <div>
              <el-button
                type="text"
                size="mini"
                onClick={() => this.onEdit(data)}
              >
                编辑
              </el-button>
              <el-button
                type="text"
                size="mini"
                onClick={() => this.onDel(data)}
              >
                删除
              </el-button>
            </div>
          )
        }
      ],
      fApi: null,
      rule: [
        { type: 'Input', title: '组织体系编码', field: 'typeCode', validate: [this.$v.required()] },
        { type: 'Input', title: '组织体系名称', field: 'typeName', validate: [this.$v.required()] },
        {
          type: 'Radio',
          title: '状态',
          field: 'validation',
          value: '1',
          options: [
            { value: '1', label: '启用' },
            { value: '0', label: '停用' }
          ]
        },
        { type: 'InputNumber', title: '序号', field: 'sortNo' },
        { type: 'Input', title: '描述', field: 'description' }
      ],
      options: {
        ...this.$utils.formOptions(120, 24)
      }
    }
  },
  methods: {
    onAdd (row = null) {
      console.log(row)
      const btn = [{ text: '保存', loading: true, cb: cb => this.save(cb, row) }]
      const o = {}
      for (const item of this.rule) {
        if (item.field !== 'validation') { o[item.field] = null }
      }
      this.$utils.dialog(`${row ? '编辑' : '添加'}组织体系`, <form-create vModel={this.fApi} rule={this.rule} option={this.options} />,
        { btn, width: '60%' })
      this.$nextTick(() => {
        if (!row) {
          this.fApi.setValue(o)
          return
        }
        this.fApi.setValue(row)
      })
    },
    save (cb, row) {
      // console.log(row)
      this.fApi.validate(async (valid) => {
        cb()
        if (valid) {
          const formData = this.fApi.formData()
          formData.id = row?.id
          const action = row ? 'system/orgTypeUpdate' : 'system/orgTypeInsert'
          const { error } = await this.$store.dispatch(action, formData)
          if (!error) {
            this.$utils.message.success('保存成功')
            this.fApi.resetFields()
            this.$utils.hideDialog()
            this.$refs.osTable.getData()
          }
        }
      })
    },
    onEdit ({ row }) {
      this.onAdd(row)
    },
    async onDel ({ row }) {
      const re = await this.$utils.confirm('确定要删除吗？')
      if (!re) return
      const { error } = await this.$store.dispatch('system/orgTypeDelete', row.id)
      if (!error) {
        this.$utils.message.success('删除成功')
        this.$refs.osTable.getData()
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.m-l-10 {
  margin-left: 10px;
}
.c-f00 {
  color: #ff0000;
}
</style>
